<template>
	<!-- 这个模板用来解决原生video总是浮在最上层的问题，使用view替换video，播放是再替换回，监听一个事件，用来被遮盖时做替换video -->
	<!--增加video标签支持，并循环添加-->
	<view @click="play">
		<view v-if="!playState" :class="node.classStr" :style="node.styleStr" style="display: inline-block; margin: auto; max-width: 100%" class="video-video">
			<view style="display: flex; width: 100%; height: 100%; flex-direction: row; justify-content: center; align-items: center">
				<image src="https://gwbj.tongwenkeji.com/html/static/play.png" style="width: 20%" mode="widthFix"></image>
			</view>
		</view>
		<video :autoplay="false" :class="node.classStr" :style="node.styleStr" class="video-video" v-if="playState" :src="node.attr.src"></video>
	</view>
</template>

<script>
export default {
	name: 'wxParseVideo',
	props: {
		node: {}
	},
	data() {
		return {
			playState: true,
			videoStyle: 'width: 100%;'
		};
	},
	methods: {
		play() {
			console.log('点击了video 播放');
			//显示播放器并播放播放器
			this.playState = !this.playState;
		}
	},
	mounted() {
		//捕获侧滑菜单的遮盖行为，隐藏video
		uni.$on('slideMenuShow', (e) => {
			console.log('捕获事件：' + e);
			if (e == 'show' && this.playState) {
				//正在播放则停止
				this.playState = false;
			}
		});
	}
};
</script>
<style>
.video-video {
	background: #000;
}
</style>
